<script setup lang="ts">
import { DataField, onFieldValueChange } from '@formily/core';
import { Radio, Select } from '@formily/element-plus';
import { Field, useField, useFormEffects } from '@formily/vue';
import { GlobalRegistry } from '@season-designable/core';
import { usePrefix } from '@season-designable/vue';
import { ElInputNumber } from 'element-plus';
import ColorInput from '../ColorInput/index.vue';
import FoldItem from '../FoldItem/index.vue';
import InputItem from '../InputItems/InputItem.vue';
import InputItems from '../InputItems/InputItems.vue';
import SizeInput from '../SizeInput/SizeInput.vue';

const field = useField<DataField>();
const prefix = usePrefix('shadow-style-setter');

// const emit = defineEmits(['change']);
// const props = defineProps(['value']);

const createFontFamilyOptions = (fonts: string[]) => {
  return fonts.map((font) => {
    const splited = font.split('=');
    const label = splited?.[0];
    const value = splited?.[1];
    return {
      label,
      value,
      style: {
        fontFamily: value,
      },
    };
  });
};

const FontFamilyOptions = createFontFamilyOptions([
  '宋体=SimSun',
  '微软雅黑=Microsoft Yahei',
  '苹方=PingFang SC',
  'Andale Mono=andale mono,monospace',
  'Arial=arial,helvetica,sans-serif',
  'Arial Black=arial black,sans-serif',
  'Book Antiqua=book antiqua,palatino,serif',
  'Comic Sans MS=comic sans ms,sans-serif',
  'Courier New=courier new,courier,monospace',
  'Georgia=georgia,palatino,serif',
  'Helvetica Neue=Helvetica Neue',
  'Helvetica=helvetica,arial,sans-serif',
  'Impact=impact,sans-serif',
  'Symbol=symbol',
  'Tahoma=tahoma,arial,helvetica,sans-serif',
  'Terminal=terminal,monaco,monospace',
  'Times New Roman=times new roman,times,serif',
  'Trebuchet MS=trebuchet ms,geneva,sans-serif',
  'Verdana=verdana,geneva,sans-serif',
]);

// const onChange = (value: any) => {
//   emit('change', value);
// };

useFormEffects(() => {
  onFieldValueChange('*', (field) => {
    if (field.props.name === 'fontFamily') {
      field.setComponentProps({
        ...field.componentProps,
        style: {
          ...field.componentProps.style,
          fontFamily: field.value,
        },
      });
    }
  });
});
</script>

<template>
  <FoldItem :class="prefix" :label="field.title">
    <template #base>
      <Field
        name="fontFamily"
        :basePath="field.address.parent()"
        :component="[
          Select,
          {
            placeholder: 'Helvetica Neue',
            teleported: false,
            clearable: true,
          },
        ]"
        :dataSource="FontFamilyOptions"
      >
      </Field>
    </template>

    <template #extra>
      <InputItems>
        <InputItem
          icon="mdi:arrow-collapse-up"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.FontWeight')"
          :style="{ width: '50%' }"
        >
          <Field
            name="fontWeight"
            :basePath="field.address.parent()"
            :component="[
              ElInputNumber,
              {
                controlsPosition: 'right',
                min: 0,
                placeholder: '0',
                style: { width: '100%' },
              },
            ]"
          />
        </InputItem>

        <InputItem
          icon="mdi:format-color"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.FontColor')"
          :style="{ width: '50%' }"
        >
          <Field
            name="color"
            :basePath="field.address.parent()"
            :component="[ColorInput]"
          />
        </InputItem>

        <InputItem
          icon="mdi:format-size"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.FontSize')"
        >
          <Field
            name="fontSize"
            :basePath="field.address.parent()"
            :component="[
              SizeInput,
              {
                exclude: ['auto'],
              },
            ]"
          />
        </InputItem>

        <InputItem
          icon="mdi:format-line-height"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.LineHeight')"
        >
          <Field
            name="lineHeight"
            :basePath="field.address.parent()"
            :component="[
              SizeInput,
              {
                exclude: ['auto'],
              },
            ]"
          />
        </InputItem>

        <InputItem
          icon="mdi:format-align-justify"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.TextAlign')"
          :style="{ width: '50%' }"
        >
          <Field
            name="textAlign"
            :basePath="field.address.parent()"
            :component="[Select, { placeholder: 'left' }]"
            :dataSource="[
              {
                label: 'left',
                value: 'left',
              },
              {
                label: 'center',
                value: 'center',
              },
              {
                label: 'right',
                value: 'right',
              },
              {
                label: 'justify',
                value: 'justify',
              },
            ]"
          />
        </InputItem>

        <InputItem
          icon="mdi:format-font"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.FontStyle')"
          :style="{ width: '50%' }"
        >
          <Field
            name="fontStyle"
            :basePath="field.address.parent()"
            :component="[Select, { placeholder: 'normal' }]"
            :dataSource="[
              {
                label: 'normal',
                value: 'normal',
                style: {
                  fontStyle: 'normal',
                },
              },
              {
                label: 'italic',
                value: 'italic',
                style: {
                  fontStyle: 'italic',
                },
              },
            ]"
          />
        </InputItem>

        <InputItem
          icon="mdi:format-font-size-decrease"
          :tooltip="GlobalRegistry.getDesignerMessage('icons.TextDecoration')"
        >
          <Field
            name="textDecoration"
            :basePath="field.address.parent()"
            :component="[
              Radio.Group,
              { optionType: 'button', style: { width: '100%' } },
            ]"
            :dataSource="[
              {
                label: 'A',
                value: 'none',
                style: {
                  flex: 1,
                  textDecoration: 'none',
                },
              },
              {
                label: 'A',
                value: 'underline',
                style: {
                  flex: 1,
                  textDecoration: 'underline',
                },
              },
              {
                label: 'A',
                value: 'line-through',
                style: {
                  flex: 1,
                  textDecoration: 'line-through',
                },
              },
            ]"
          />
        </InputItem>
      </InputItems>
    </template>
  </FoldItem>
</template>

<style lang="scss" scoped>
.dn-shadow-style-setter {
  :deep(.el-radio-button__inner) {
    width: 100%;
    text-decoration: inherit;
  }

  :deep(.el-input__inner) {
    font-family: inherit;
  }
}
</style>
